<template>
    <div class="address-item" :class="{ selected: selected }" @click="handleSelect">
        <div>
            <div class="to">
                <el-link type="danger" :underline="false">
                    <i class="iconfont icon-ditubiaozhu"></i>
                    <strong class="ml-10">寄送至</strong>
                </el-link>
            </div>
        </div>
        <div>
            <span>
                （{{ item.realname }} 收） {{ item.province }}{{ item.city }}{{ item.area }}{{ item.address }}
            </span>
            <span class="text-gray">{{ item.mobile }}</span>
        </div>
        <div>
            <span class="text-gray" v-if="item.is_default === 1">默认地址</span>
            <span class="text-red" v-else @click="setDefaultAddress(item)">设为默认地址</span>
        </div>
        <div class="text-right">
            <el-link type="danger" :underline="false" @click="addEditFun('edit', item)"><strong>修改地址</strong></el-link>
        </div>
    </div>
</template>

<script>
import { addressEdit } from '@/api/apis'
export default {
    name: "addrItem",
    components: {
    },
    props: {
        item: {
            type: Object,
            default: () => ({})
        },
        selected: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {
        }
    },
    computed: {
    },
    methods: {
        setDefaultAddress (item) {
            //let params = item;
            //params.is_default = 1;
            addressEdit({
                ...item,
                is_default: 1
            }).then(res => {
                if (res.code === 1) {
                    this.$emit('refresh')                 
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        addEditFun (type, item) {
            this.$emit('addEditFun', type, item)
        },
        handleSelect(){
            this.$emit('handleSelect', this.item)
        }
    }
}
</script>

<style lang="less" scoped>
.address-item {
    display: grid;
    grid-template-columns: 10% 1fr auto 10%;
    grid-column-gap: 20px;
    font-size: 16px;
    padding: 15px;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;

    .el-link {
        font-size: 16px;
    }

    &:not(:last-child) {
        margin-bottom: 15px;
    }

    &:hover {
        background-color: rgba(223, 41, 34, 0.10);
    }

    &.selected {
        border-color: #EF312A;
        background-color: rgba(223, 41, 34, 0.10);
    }

}
</style>